<template>
  <view class="container">
    <view class="header">
      <text class="title">订单记录</text>
    </view>

    <!-- 订单状态列表 -->
    <view class="timeline">
      <view class="timeline-item" v-for="(item, index) in orderHistory" :key="index">
        <view class="status-container">
          <view class="circle" :class="{'active': item.active}"></view>
          <view class="status-text">
            <text class="status">{{ item.status }}</text>
            <text class="time">{{ item.time }}</text>
          </view>
        </view>
        <view class="description">{{ item.description }}</view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      orderHistory: [] // 订单历史记录初始化为空
    };
  },
  onLoad() {
    // 模拟订单数据获取
    this.fetchOrderHistory();
  },
  methods: {
    // 模拟获取订单记录数据
    fetchOrderHistory() {
      this.orderHistory = [
        { status: '待缴费', description: '师傅已将服务费用提交至平台，请您及时验收缴费', time: '2023-12-25 08:26', active: true },
        { status: '上传图片(服务后)', description: '师傅已将服务后照片上传至平台', time: '2023-12-25 08:26', active: true },
        { status: '上传图片(服务前)', description: '师傅已将服务前照片上传至平台', time: '2023-12-25 08:26', active: true },
        { status: '王大壮师傅已接单', description: '师傅即将上门服务，请您耐心等待', time: '2023-12-25 08:26', active: true },
        { status: '等待接单中…', description: '请您耐心等待，我们尽快催促师傅接单', time: '', active: true },
        { status: '订单已生成', description: '请您耐心等待，我们尽快催促师傅接单', time: '2023-12-25 08:26', active: true }
      ];
    }
  }
};
</script>

<style scoped>
.container {
  padding: 20px;
}

.header {
  margin-bottom: 20px;
}

.title {
  font-size: 20px;
  font-weight: bold;
  text-align: center;
}

.timeline {
  margin-top: 10px;
}

.timeline-item {
  margin-bottom: 20px;
  padding-left: 20px;
  position: relative;
  border-left: 2px solid #007aff;
}

.timeline-item:last-child {
  border-left: none;
}

.status-container {
  display: flex;
  align-items: center;
}

.circle {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: #ddd;
  margin-right: 10px;
}

.circle.active {
  background-color: #007aff;
}

.status-text {
  display: flex;
  flex-direction: column;
}

.status {
  font-size: 16px;
  font-weight: bold;
}

.time {
  font-size: 12px;
  color: #999;
}

.description {
  font-size: 14px;
  color: #666;
  margin-left: 20px;
}
</style>
